<template>
  <div class="child-left-header">
    <img :src="typeIcon" />
    <span>通知分类</span>
  </div>
  <div class="content-search-box">
    <je-input
      v-model:value.trim="searchName"
      placeholder="搜索"
      autocomplete="false"
      class="left-search-box"
    >
      <template #prefix>
        <i class="fal fa-search" style="padding-right: 2px"></i>
      </template>
    </je-input>
  </div>
  <div class="left-main">
    <div v-show="categoryList.length > 0" class="left-main-list">
      <div
        v-for="categoryItem in categoryList"
        :key="categoryItem.id"
        class="left-type-item"
        :class="{ 'active-category': categoryItem.code == curCategoryCode }"
        @click="handleCategory(categoryItem.code)"
      >
        <div class="type-item-name">
          <i :class="getIcon(categoryItem.iconCls)"></i>
          <span>{{ categoryItem.text }}</span>
        </div>
      </div>
    </div>
    <div v-show="categoryList.length == 0" class="left-main-no-data">暂无数据</div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue';
  import VueEvent from '@/helper/event';
  import { HOME_NOTIFY_SWITCH_TYPE } from '@/helper/constant';
  import { GetDicItemByCode, QueryNotifyType } from '@/api';
  import { Input } from '@jecloud/ui';
  import typeIcon from '@/assets/type-icon.png';
  export default defineComponent({
    name: 'NotifyType',
    components: {
      JeInput: Input,
    },
    setup() {
      let searchTimeout = null; //关键人搜索
      const state = reactive({
        typeIcon,
        searchName: '',
        categoryList: [], //通知分类
        curCategoryCode: '', //选择当前的分类
      });
      const methods = {
        watchFlowType(type) {
          state.curFlowType = type;
        },
        getCategoryByCode() {
          //获取通知分类
          const param = {
            DICTIONARY_DDCODE: 'JE_CORE_MSGTYPE',
          };
          GetDicItemByCode(param).then((res) => {
            state.categoryList = res;
          });
        },
        searchType(typeName) {
          //搜索通知分类
          const param = {
            keyWord: typeName,
          };
          QueryNotifyType(param).then((res) => {
            if (res.code == 1000 && res.success) {
              state.categoryList = res.data;
            }
          });
        },
        getIcon(iconCls) {
          return iconCls || 'fal fa-memo-pad';
        },
      };
      const handleCategory = (code) => {
        //选择当前分类
        if (state.curCategoryCode) {
          //有选中的分类
          if (state.curCategoryCode == code) {
            //选中的分类和当前操作的分类相等
            state.curCategoryCode = '';
          } else {
            //选中的分类和当前操作的分类不相等
            state.curCategoryCode = code;
          }
        } else {
          //没有选中的分类
          state.curCategoryCode = code;
        }
        VueEvent.emit(HOME_NOTIFY_SWITCH_TYPE, state.curCategoryCode);
      };
      watch(
        () => state.searchName,
        (newVal, oldVal) => {
          if (newVal !== oldVal) {
            if (newVal != '') {
              clearTimeout(searchTimeout);
              searchTimeout = setTimeout(() => {
                methods.searchType(newVal);
              }, 1000);
            } else {
              clearTimeout(searchTimeout);
              searchTimeout = setTimeout(() => {
                methods.getCategoryByCode();
                // state.curCategoryCode = '';
                // VueEvent.emit(HOME_NOTIFY_SWITCH_TYPE, state.curCategoryCode);
              }, 1000);
            }
          }
        },
      );
      onMounted(() => {
        methods.getCategoryByCode();
      });

      return {
        handleCategory,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .content-search-box .ant-input-affix-wrapper {
    border-color: #ecedf0;
  }
</style>
<style scoped lang="less">
  .child-left-header {
    width: 210px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-size: 16px;
    border-left: 1px solid #ecedf0;
    border-top: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    img {
      width: 16px;
      height: 16px;
    }
    span {
      line-height: 16px;
      padding-left: 8px;
      font-weight: bold;
      color: @primary-color;
    }
  }
  .content-search-box {
    width: 210px;
    height: 40px;
    box-sizing: border-box;
    .left-search-box {
      width: 100%;
      height: 40px;
      font-size: 14px;
      box-sizing: border-box;
    }
  }
  .left-main {
    width: 210px;
    height: 500px;
    box-sizing: border-box;
    border-left: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    border-bottom: 1px solid #ecedf0;
    .left-main-list {
      width: 100%;
      height: 500px;
      overflow-y: auto;
    }
    .left-main-no-data {
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #3f3f3f;
    }
    .left-type-item {
      width: 100%;
      height: 32px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .type-item-name {
        font-size: 14px;
        color: #3f3f3f;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          padding-left: 8px;
        }
      }
    }
    .left-type-item:hover {
      background: #f9f9f9;
      .type-item-name {
        color: #454545;
      }
    }
    .active-category {
      background-color: @je-menu-item-active-bg;
      .type-item-name {
        color: @primary-color;
      }
    }
  }
  .left-main::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
</style>
